<template>
	<yb-popup direction="center" :visible="show" @hide="handleHide">
		<view class="yb-flex" :style="{'background-color': skinColor.color_bg_2, width: '700rpx', height: bottomPopupHeight + 'px'}">
			<view class="yb-flex yb-row yb-align-center padding-gap" :style="{
				'background-color': skinColor.color_theme_1,
				height: '100rpx'
			}">
				<yb-text custom-class="yb-flex-1" :lines="1" :size="32" weight="bold" :color="skinColor.color_4" :value="params.title" />
				<yb-tap @click="handlePulldown" custom-style="margin-right: 20rpx">
					<rd-icon name="refresh" :size="36" weight="bold" :color="skinColor.color_4"></rd-icon>
				</yb-tap>
				<yb-tap @click="handleClose">
					<yb-icon name="fork" :size="40" weight="bold" :color="skinColor.color_4"></yb-icon>
				</yb-tap>
			</view>
			<yb-list ref="list" @loadmore="handleLoadmore " :empty="{
				show: isLastPage && list.length == 0,
				color: skinColor.color_gap_1,
				bgColor: skinColor.color_bg_1
			}" custom-class="yb-flex-1">
				<yb-list-item v-for="(item, index) in list">
					<view class="list yb-flex yb-row yb-align-center" :style="{
						'border-bottom-color': skinColor.color_gap_1
					}">
						<view class="yb-flex yb-flex-1">
							<yb-text :size="24" weight="bold" :lines="1" :color="skinColor.color_1" :value="app.$business.filterSource(item.source).title"></yb-text>
							<yb-text custom-style="margin-top:20rpx" :size="28" weight="bold" :lines="1" :color="skinColor.color_3" :value="item.latest || item.desc || item.creator"></yb-text>
						</view>
						<yb-button @click="handleExchangeClick(item)" :options="{
							size: 24
						}" custom-class="btn" type="danger" value="切换到该源"></yb-button>
					</view>
				</yb-list-item>
				<yb-list-item>
					<view class="loading yb-flex yb-row yb-align-center yb-justify-center">
						<yb-loading :visible="loading" :color="skinColor.color_1" size="28" />
						<yb-text custom-style="margin-left:10rpx" :color="skinColor.color_1" size="28" :value="isLastPage ? '~~ 已经没有更多了 ~~' : '加载中'"></yb-text>
					</view>
				</yb-list-item>
			</yb-list>
		</view>
	</yb-popup>
</template>

<script>
	import appMixin from '@/common/mixin/app.js'
	export default {
		mixins: [appMixin],
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			params: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			reqs () {
				let types = []
				let reqs = []
				let sources = this.app.$business.getSources()
				sources = sources.filter(s => s.search && s.search.length > 0 )
				sources.forEach(source => {
					source.search.forEach((req, key) => {
						const reqId = source.id + '_' + key
						if ( req.type == this.params.type && !this.isLastPages[reqId] ) {
							reqs.push(
								Object.assign({}, req, {
									reqId,
									source: source
								})
							)
						}
					})
				})
				return reqs
			},
			isLastPage () {
				return this.reqs.length == 0
			},
			pageSize () {
				return this.$store.getters['app/getPageSize']
			}
		},
		data () {
			return {
				show: false,
				list: [],
				nextUrls: {},
				isLastPages: {},
				loading: false,
				requestTime: 0,
				size: 5,
				currentPage: 1
			}
		},
		created() {
			this.show = this.visible
		},
		methods: {
			async getList (type) {
				const data = { keyword: this.params.title, currentPage: this.currentPage }
				if ( (this.requestTime + 1) * this.size > this.reqs.length) { this.requestTime = 0 }
				const reqs = this.reqs.slice(this.requestTime * this.size, (this.requestTime + 1) * this.size)
				const request = reqs.map(req => 
					this.$store.dispatch('network/request', {
						name: 'search',
						url: this.nextUrls[req.reqId] || req.url,
						req: req,
						data: data
					})
				)
				return await Promise.all(request).then(ress => {
					let list = [], nextUrls = {}, isLastPages = {}
					ress.forEach((res, key) => {
						if ( res.code == this.app.$config.ERR_OK ) {
							const listSync = res.data.list.filter(item => item.id != this.params.id && item.title == this.params.title)
							const isContained = type == 'loadmore' ? this.app.$utils.isContained(this.list, listSync) : false
							list = list.concat( isContained ? [] : listSync)
							nextUrls[reqs[key].reqId] = res.data.nextUrl
							isLastPages[reqs[key].reqId] = listSync.length == 0 || isContained || res.data.isLastPage
						} else {
							isLastPages[reqs[key].reqId] = true
						}
					})
					return {
						code: list.length > 0 ? this.app.$config.ERR_OK : this.app.$config.ERR_FALSE,
						data: {
							list: list,
							nextUrls,
							isLastPages
						}
					}
				})
			},
			refresh () {
				this.loading = true
				this.handlePulldown()
			},
			handleHide () {
				this.show = false
				this.loading = false
				this.$emit('hide')
				this.$emit('update:visible', false)
			},
			handlePulldown () {
				this.$refs.list.resetLoadmore()
				this.requestTime = 0
				this.currentPage = 1
				this.isLastPages = {}
				this.nextUrls = {}
				this.getList().then(res => {
					this.list = res.data.list
					this.nextUrls = Object.assign({}, this.nextUrls, res.data.nextUrls)
					this.isLastPages = Object.assign({}, this.isLastPages, res.data.isLastPages)
					this.$nextTick(function () {
						if ( this.isLastPage ){
							this.$refs.list.setLoadmoreEnd()
							this.loading = false
						} else if ( res.data.list.length > this.pageSize ) {
							this.$refs.list.setLoadmoreSuccess()
							this.loading = false
						} else { this.handleLoadmore() }
					})
				})
			},
			handleLoadmore (callback,length=0) {
				this.loading = true
				if ( (this.requestTime + 1) * this.size >= this.reqs.length) { 
					this.requestTime = 0
					this.currentPage++
				} else { this.requestTime++ }
				this.getList('loadmore').then(res => {
					this.list = this.list.concat(res.data.list)
					this.nextUrls = Object.assign({}, this.nextUrls, res.data.nextUrls)
					this.isLastPages = Object.assign({}, this.isLastPages, res.data.isLastPages)
					this.$nextTick(function () {
						if ( this.isLastPage ){ 
							callback ? callback('end') : this.$refs.list.setLoadmoreEnd()
							this.loading = false
						} else if ( res.data.list.length > this.pageSize ) {
							callback ? callback('success') : this.$refs.list.setLoadmoreSuccess()
							this.loading = false
						} else {  this.handleLoadmore(callback) }
					})
				})
			},
			handleExchangeClick (params) {
				this.show = false
				this.$emit('exchange', params)
				this.list = []
				this.nextUrls = {}
				this.isLastPages = {}
				this.requestTime = 0
			},
			handleClose () {
				this.show = false
			}
		},
		watch: {
			visible (newVal) {
				this.show = newVal
			},
			show (newVal) {
				if ( newVal && this.list.length == 0 && !this.isLastPage ) {
					this.loading = true
					this.handlePulldown()
				} 
			}
		}
	}
</script>

<style scoped>
.title {
	padding: 20rpx 0;
}
.list {
	padding: 20rpx 30rpx;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
.btn {
	width: 150rpx;
	height: 60rpx;
}
.loading {
	margin: 30rpx 0;
}
</style>
